<script lang="ts" setup>
import { ref } from "vue";

const dataList = ref([
  {
    id: 1,
    name: "华中区",
    sort: "1",
    employeeCount: "1000",
    createdAt: "2023-01-15 09:30:00",
  },
  {
    id: 2,
    name: "华东区",
    sort: "2",
    employeeCount: "1000",
    createdAt: "2023-02-20 14:45:00",
  },
  {
    id: 3,
    name: "华南区",
    sort: "3",
    employeeCount: "1000",
    createdAt: "2023-03-10 11:20:00",
  },
  {
    id: 4,
    name: "华西区",
    sort: "4",
    employeeCount: "1000",
    createdAt: "2023-04-05 16:10:00",
  },
  {
    id: 5,
    name: "华北区",
    sort: "5",
    employeeCount: "1000",
    createdAt: "2023-05-12 08:55:00",
  },
]);

const modalVisible = ref(false);

const handleAction = (action: string) => {
  if (action === "add") {
    modalVisible.value = true;
  }
};
</script>

<template>
  <umrp-container :gap="16" bg-color="#f2f2f2" height="100%" padding="16px">
    <umrp-search-card :form-span="6">
      <umrp-row>
        <umrp-col>
          <umrp-form-item label="区域名称">
            <umrp-input placeholder="请输入区域的名称"></umrp-input>
          </umrp-form-item>
        </umrp-col>
      </umrp-row>
    </umrp-search-card>
    <umrp-card :border="false">
      <umrp-table :action-bar="true" :data="dataList" @action="handleAction">
        <template #columns>
          <umrp-table-column title="编号" data-index="id" :width="80"></umrp-table-column>
          <umrp-table-column title="区域名称" data-index="name"></umrp-table-column>
          <umrp-table-column title="员工数量" data-index="employeeCount" :width="160"></umrp-table-column>
          <umrp-table-column title="区域排序" slot-name="sort" :width="160"></umrp-table-column>
          <umrp-table-column title="创建时间" data-index="createdAt" :width="220"></umrp-table-column>
          <umrp-table-column slot-name="action" title="操作" :width="120"></umrp-table-column>
        </template>
        <template #action>
          <umrp-space :size="10">
            <umrp-button type="primary" @click="modalVisible = true">编辑</umrp-button>
            <umrp-popconfirm message="您确认删除么？">
              <umrp-button type="danger">删除</umrp-button>
            </umrp-popconfirm>
          </umrp-space>
        </template>
        <template #sort>
          <umrp-input-number default-value="0" :width="80"></umrp-input-number>
        </template>
      </umrp-table>
    </umrp-card>
  </umrp-container>
  <umrp-modal width="500px" v-model:visible="modalVisible">
    <umrp-container padding="16px 0">
      <umrp-form>
        <umrp-form-item label="区域名称">
          <umrp-input placeholder="请输入区域的名称"></umrp-input>
        </umrp-form-item>
      </umrp-form>
    </umrp-container>
  </umrp-modal>
</template>
